<template>

  <el-dialog :title="id ? '商户公告修改' : '商户公告添加'" :visible.sync="dialogVisible" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="标题" size="mini" prop="title">
        <el-input placeholder="" v-model="form.title" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="类型" size="mini">
        <el-radio v-model="form.type" label="1">公告</el-radio>
        <el-radio v-model="form.type" label="2">新闻</el-radio>
      </el-form-item>
      
      <el-form-item label="内容" size="mini" prop="content">
        <!-- <el-input
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 20}"
          placeholder="请输入内容"
          v-model="form.content">
        </el-input> -->
        <quill-editor
          ref="myQuillEditor"
          v-model="form.content"
          :options="editorOption"
        />
      </el-form-item>

      <el-form-item label="置顶" size="mini">
        <el-radio v-model="form.isTop" label="0">否</el-radio>
        <el-radio v-model="form.isTop" label="1">是</el-radio>
      </el-form-item>

      <el-form-item label="展示时间" size="mini" prop="startTime">
        <el-date-picker
          v-model="dateRange"
          @change="handleDateRangeChange"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-popover
        v-if="id != null"
        placement="top"
        width="160"
        v-model="popDeleteVisible">
        <p>确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
          <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
        </div>
        <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
      </el-popover>

      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.announcement';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        title: '',
        type: '1',
        content : '',
        isTop : '0',
        startTime: '',
        endTime: ''
      },

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '请选择时间周期', trigger: 'blur' },
        ],
      },

      id  : null,
      data: null,

      dateRange: [],

      editorOption: {
        theme: 'snow'
      },

    }
  },
  mounted () {
  },

  methods: {

    show (id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.form = {
        title: '',
        type: '1',
        content : '',
        isTop : '0',
        startTime: '',
        endTime: ''
      };
      this.dateRange = []
    },

    handleDateRangeChange () {
      this.form.startTime = this.dateRange.length > 0 ? this.dateRange[0] : ''
      this.form.endTime = this.dateRange.length > 0 ? this.dateRange[1] : ''
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.title = this.data.title;
      this.form.content = this.data.content;
      this.form.type = this.data.type + '';
      this.form.isTop = this.data.isTop + '';
      this.form.startTime = this.data.startTime;
      this.form.endTime = this.data.endTime;
      this.dateRange = [new Date(this.data.startTime), new Date(this.data.endTime)]
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({id: this.id});

      this.loading = false;
      this.close();
      this.$message({message: '删除成功', type: 'success'});
    },

    async submitSet () {

      console.log(this.form)
      return
      this.form.id = this.id;
      await ApiMain.set(this.form);
      this.$message({message: '修改成功', type: 'success'});
      this.close();

    },

    async submitAdd () {

      await ApiMain.add(this.form);
      this.$message({message: '添加成功', type: 'success'});
      this.close();
    },
  }
}
</script>

<style>
.ql-editor{
  height: 400px;
}
</style>
